<template>
 <!-- 判断 baseGoods数据对象中是否有数据, 有就显示, 没有就不显示 -->
  <div v-if="Object.keys(baseGoods).length !== 0" class="base-info">
    <div class="info-price">
      <span class="n-price">{{ baseGoods.newPrice }}</span>
      <span class="o-price">{{ baseGoods.oldPrcie }}</span>
      <span v-if="baseGoods.discount" class="discount">{{ baseGoods.discount }}</span>
    </div>

    <div class= "info-title">{{ baseGoods.title }}</div>
    
     <div class="info-service">
        <span class="info-service-item" v-for="i in baseGoods.services.length-1" :key="i">
         <img :src="baseGoods.services[i-1].icon">
         <span>{{ baseGoods.services[i-1].name}}</span>
        </span>
    </div>

    <div class="info-other">
        <span class="fahuo">{{ baseGoods.services[baseGoods.services.length-1].name }}</span>
        <span class="shouc">{{ baseGoods.columns[1] }}</span>
        <span class="xiaoliang">{{ baseGoods.columns[0] }}</span>
    </div>
     <hr class="baseHr">
    </div>
</template>

<script>
export default {
    name: 'DetailBaseInfo',
    props:{
        baseGoods:{
            type: Object,
            default() {
                return {}
            }
        }
    },

}
</script>

<style scoped>
  .baseHr{
      width: 100%;
      color: #000;
  }
  .base-info{
     padding: 0 16px;
  }
  .info-price{
      padding: 8px 0 15px 0;
      font-size: 24px;
  }
  .info-price .n-price{
     color: rgba(255, 0, 0, 0.8);
     font-weight: 600;
  }
  .info-price .discount{
      margin-left: 15px;
      padding: 0.2rem;
      font-size: 12px;
      background-color: rgba(255, 0, 0, 0.2);
      color: rgba(255, 0, 0, 0.8);
      border-radius: 5px;
  }
  .info-title{
     padding: 8px 5px;
     font-size: 17.6px;
     background-color: #e4e4e47a;
     border-radius: 5px;
     margin-bottom: 3px;
  }
  .info-service{
      display: flex;
      justify-content: space-between;
      background-color: #e4e4e47a;
      border-radius: 5px;
      padding: 8px 5px;
      font-size: 12px;
      line-height: 20px;
  }
   .info-service .info-service-item img{
       width: 20px;
   }
  .info-other{
     display: flex;
     justify-content : space-between;
     line-height: 16px;
     padding: 25px 5px;
     font-size: 12px;
  }
  .info-other .shouc, 
  .info-other .xiaoliang{
      padding: 2px 0;
  }
  .info-other .fahuo{
    padding: 2px 5px;
    background-color: rgba(255, 0, 0, 0.2);
    color: rgba(255, 0, 0, 0.8);
    border-radius: 15px;
    }
</style>